<template>
  <div class="customer-info-container">
    <el-row :gutter="15">
      <el-col :span="18">
        <!-- 进度 -->
        <div style="height: 100px; padding-top: 20px">
          <div style="width: 80%; float: left">
            <el-steps align-center :active="currFlow" finish-status="success">
              <el-step title="商机跟进" />
              <el-step title="签约" />
              <el-step title="到单录入" />
              <el-step title="确认收款" />
              <el-step title="销售提单" />
              <el-step title="内勤审核/分单" />
              <el-step title="服务中" />
            </el-steps>
          </div>
        </div>
        <!-- 合同信息 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="合同信息"
            :column="3"
            border
          />
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="商机业务类：" required>
                <el-text>{{ OrderInfo.BusinessOrderName }}</el-text>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="合同编号" required>
                <el-input v-model="OrderInfo.OrderCode" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签约日期" required>
                <el-date-picker v-model="OrderInfo.SignOrderDate" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同属性" required>
                <el-select v-model="OrderInfo.OrderType" disabled>
                  <el-option
                    v-for="(item, index) in orderTypeOption"
                    :key="index"
                    :label="item.OrderTypeName"
                    :value="item.OrderTypeID"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="合同金额" required>
                <el-input v-model="OrderInfo.OrderTotalMoney" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="注：不含备付金金额" />
            </el-col>
            <el-col :span="6">
              <el-form-item label="备付金金额" required>
                <el-input v-model="OrderInfo.ReserveMoney" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="注：用于抵扣销量佣金" />
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="OrderInfo.OrderMemo" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 签约产品 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="签约业务产品"
            :column="3"
            :size="size"
            border
          />
          <div style="padding-bottom: 10px">
            <el-table v-loading="listLoading" :data="ProductList" show-summary>
              <el-table-column
                align="center"
                label="ID"
                prop="OrderListID"
                show-overflow-tooltip
                width="60"
              />
              <el-table-column
                align="center"
                label="业务类型"
                prop="BusinessClassName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="产品名称"
                prop="ProductName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="产品价格"
                prop="ProductPrice"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="产品数量"
                prop="ProductNum"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="产品金额"
                prop="ProductPrice"
                show-overflow-tooltip
              />
              <el-table-column align="center" label="服务期限" width="230">
                <template #default="{ row }">
                  {{ row.PlanServiceStartDate }} 至 {{ row.PlanServiceEndDate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="180">
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    disabled
                    @click="productEdit(row)"
                  >
                    补充详情
                  </el-button>
                  <el-button
                    v-if="OrderFlowState === 1"
                    disabled
                    type="danger"
                    size="small"
                    @click="productDelete(row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- 赠品 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="赠品"
            :column="3"
            :size="size"
            border
          />
          <div style="padding-bottom: 10px">
            <el-table v-loading="listLoading" :data="GiftList">
              <el-table-column
                align="center"
                label="ID"
                prop="OrderListID"
                show-overflow-tooltip
                width="70"
              />
              <el-table-column
                align="center"
                label="批准人"
                prop="Approver"
                show-overflow-tooltip
                width="90"
              />
              <el-table-column
                align="center"
                label="赠品名称"
                prop="ProductName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="赠品成本"
                prop="ProductPrice"
                show-overflow-tooltip
              />
              <el-table-column align="center" label="服务期限" width="230">
                <template #default="{ row }">
                  {{ row.PlanServiceStartDate }} 至 {{ row.PlanServiceEndDate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="180">
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    disabled
                    @click="giftEdit(row)"
                  >
                    补充详情
                  </el-button>
                  <el-button
                    v-if="OrderFlowState === 1"
                    disabled
                    type="danger"
                    size="small"
                    @click="giftDelete(row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- 账号相关信息 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="账号相关信息"
            :column="3"
            :size="size"
            border
          />
          <el-table v-loading="listLoading" :data="StoreList">
            <el-table-column
              align="center"
              label="店铺或账号ID"
              prop="BindStoreID"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              align="center"
              prop="ProductName"
              label="服务产品或赠品"
              width="170"
            />
            <el-table-column
              align="center"
              prop="BindStoreAccount"
              label="账号"
              width="160"
            />
            <el-table-column
              align="center"
              prop="StorePassword"
              label="密码"
              width="160"
            />
            <el-table-column align="center" label="是否工厂店" width="130">
              <template #default="{ row }">
                <span v-if="row.isFactory == 0">否</span>
                <span v-if="row.isFactory == 1">是</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="服务期限" width="230">
              <template #default="{ row }">
                {{ row.ServiceStartDate }} 至 {{ row.ServiceEndDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="链接" width="70">
              <template #default="{ row }">
                <div v-if="row.StoreUrl">
                  <a :href="row.StoreUrl" target="_blank">链接</a>
                </div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200">
              <template #default="{ row }">
                <el-button size="small" disabled @click="handleEdit(row)">
                  编辑
                </el-button>
                <!-- <el-button size="small" @click="handleEdit(row)">解绑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <!-- 合同收款 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="合同收款"
            :column="3"
            :size="size"
            border
          />
          <div style="padding-bottom: 10px">
            <el-table v-loading="listLoading" :data="PaymentList" show-summary>
              <el-table-column
                align="center"
                label="ID"
                prop="PaymentID"
                show-overflow-tooltip
                width="70"
              />
              <el-table-column align="center" label="款项类型" width="80">
                <template #default="{ row }">
                  <el-text>{{ row.PaymentClassName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="收款日期" width="120">
                <template #default="{ row }">
                  <el-text>{{ row.PaymentDate }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="收款方式" width="80">
                <template #default="{ row }">
                  <el-text>{{ row.PaymentTypeName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="收款公司">
                <template #default="{ row }">
                  <el-text>{{ row.PaymentCompanyName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="收款账户">
                <template #default="{ row }">
                  <el-text>{{ row.PaymentAccount }}</el-text>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="PaymentMoney"
                label="到账金额"
                width="100"
              />
              <el-table-column
                align="center"
                prop="HesuanMoney"
                label="业绩核算金额"
                width="120"
              />
              <el-table-column
                align="center"
                prop="HesuanOrderCount"
                label="业绩核算单量"
                width="120"
              />
              <el-table-column
                v-if="OrderFlowState === 1"
                align="center"
                label="操作"
                width="180"
              >
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    @click="paymentEdit(row)"
                  >
                    修改
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="paymentDelete(row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                v-if="OrderFlowState === 2 && pageflow === 3"
                align="center"
                label="确认收款"
                width="180"
              >
                <template #default="{ row }">
                  <el-button
                    v-if="row.PaymentState == 0"
                    type="danger"
                    size="small"
                    @click="paymentConfirm(row)"
                  >
                    收款确认
                  </el-button>
                  <el-button v-else type="success" size="small">
                    已确认收款
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                v-else
                align="center"
                label="确认收款"
                width="180"
              >
                <template #default="{ row }">
                  <el-text v-if="row.PaymentState == 0" type="danger">
                    待收款确认
                  </el-text>
                  <el-text v-else type="success">已确认收款</el-text>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- 开票信息 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="开票信息"
            :column="3"
            :size="size"
            border
          />
          <div style="padding-bottom: 10px">
            <el-table
              v-loading="listLoading"
              :data="InvoicingList"
              show-summary
            >
              <el-table-column
                align="center"
                label="ID"
                prop="InvoicingID"
                show-overflow-tooltip
                width="70"
              />
              <el-table-column align="center" label="开票类型" width="120">
                <template #default="{ row }">
                  <el-text>{{ row.InvoicingTypeName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="开票金额" width="120">
                <template #default="{ row }">
                  <el-text>{{ row.InvoicingMoney }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="客户方单位">
                <template #default="{ row }">
                  <el-text>{{ row.CustomerCompanyName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="纳税人识别号">
                <template #default="{ row }">
                  <el-text>{{ row.CustomerLicenseCode }}</el-text>
                </template>
              </el-table-column>
              <el-table-column align="center" label="开票方单位">
                <template #default="{ row }">
                  <el-text>{{ row.MyCompanyName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column
                v-if="OrderFlowState === 1"
                align="center"
                label="操作"
                width="180"
              >
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    @click="invoicingEdit(row)"
                  >
                    修改
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="handleDelete(row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                v-if="OrderFlowState >= 2 && pageflow === 3"
                align="center"
                label="操作"
                width="180"
              >
                <template #default="{ row }">
                  <el-button
                    v-if="row.InvoicingState == 0"
                    disabled
                    type="danger"
                    size="small"
                    @click="paymentConfirm(row)"
                  >
                    确认开票
                  </el-button>
                  <el-button v-else disabled type="success" size="small">
                    已确认开票
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column v-else align="center" label="开票确认">
                <template #default="{ row }">
                  <el-text
                    v-if="row.InvoicingState == 0"
                    type="danger"
                    size="small"
                  >
                    新开票待确认
                  </el-text>
                  <el-text v-else type="success" size="small">
                    已确认开票
                  </el-text>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- 分单 -->
        <el-card shadow="hover">
          <el-descriptions
            class="margin-top"
            title="分单"
            :column="3"
            :size="size"
            border
          />
          <div>
            <div style="padding-bottom: 10px">
              <el-table
                v-loading="listLoading"
                :data="WorkTaskList"
                @selection-change="setSelectRows"
              >
                <el-table-column
                  align="center"
                  label="ID"
                  prop="WorkTaskID"
                  show-overflow-tooltip
                  width="60"
                />
                <el-table-column align="center" label="分单目标" width="200">
                  <template #default="{ row }">
                    {{ row.TaskTargetName }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="指派接单人" width="100">
                  <template #default="{ row }">
                    {{ row.TaskStaffName }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="派单时间" width="200">
                  <template #default="{ row }">{{ row.AddTime }}</template>
                </el-table-column>
                <el-table-column align="center" label="任务" width="120">
                  <template #default="{ row }">{{ row.ProductName }}</template>
                </el-table-column>
                <el-table-column align="center" label="指定店铺/账号">
                  <template #default="{ row }">
                    {{ row.BindStoreAccount }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="接单状态" width="100">
                  <span style="color: #ff0000">待接单</span>
                </el-table-column>
                <el-table-column align="center" label="操作" width="250">
                  <template #default="{ row }">
                    <el-button
                      type="success"
                      disabled
                      size="small"
                      @click="doAssignTaskList(row)"
                    >
                      任务清单
                    </el-button>
                    <el-button
                      type="danger"
                      disabled
                      size="small"
                      @click="cancelTaskList(row)"
                    >
                      取消分单
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            客户基本信息
            <el-button
              class="card-header-tag"
              :type="CustomerInfo.BusinessPerson ? 'success' : 'danger'"
              size="small"
              @click="CustomerHandle"
            >
              补充详情
            </el-button>
          </template>
          <customer-info ref="customerInfoRef" />
        </el-card>
        <el-card shadow="hover">
          <template #header>
            签单业务销售人员信息
            <el-button
              class="card-header-tag"
              type="success"
              size="small"
              @click="toRecord"
            >
              查看商机跟进记录
            </el-button>
          </template>
          <salestff-info ref="saleStaffInfoRef" />
        </el-card>
      </el-col>
    </el-row>
    <div></div>
    <TrackRecord ref="recordRef" @fetch-data="fetchData" />

    <gift ref="giftRef" @fetch-data="fetchData" />
    <invoicing ref="invoicingRef" @fetch-data="fetchData" />
    <license ref="licenseRef" @fetch-data="fetchData" />
    <customer ref="customerRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import TrackRecord from '@/views/business/components/TrackRecord'
  import CustomerInfo from '@/views/business/components/CustomerInfo'
  import SalestffInfo from '@/views/business/components/SalestffInfo'
  import { getOrderInfo } from '@/api/businessOrder'
  import Gift from '@/views/business/components/Gift'
  import Invoicing from '@/views/business/components/Invoicing'
  import License from '@/views/business/components/License'
  import Customer from '@/views/business/components/Customer'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'
  import { MoreFilled } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'AllOrderDetails',
    components: {
      TrackRecord,
      CustomerInfo,
      SalestffInfo,
      Customer,
      License,
      Invoicing,
      Gift,
    },
    setup() {
      const route = useRoute()
      // const router = useRouter()

      const activeNames = ref(['1'])

      const state = reactive({
        currFlow: 0,
        OrderInfo: {},
        GiftList: [],
        StoreList: [],
        PaymentList: [],
        InvoicingList: [],
        WorkTaskList: [],

        recordRef: null,
        CustomerInfo: {},
        orderid: 0,
        customerInfoRef: null,
        saleStaffInfoRef: null,
        ProductList: [],
        editRef: null,
        customerRef: null,
        CustomerPickID: '',
        licenseRef: null,
        invoicingRef: null,
        giftRef: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          actStffPostID: 0,
          orderid: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        isContract: 0,
        ContractUrl: '',
        OrderFlowSet: {},
        OrderFlowState: 0,
      })

      const handleChange = (val) => {
        console.log(val)
      }
      const InvoicingHandle = () => {
        state.invoicingRef.showEdit(state.CustomerInfo)
      }
      const LicenseHandle = () => {
        state.licenseRef.showEdit(state.CustomerInfo)
      }
      const CustomerHandle = () => {
        state.customerRef.showEdit(state.CustomerInfo)
      }
      const activities = [
        {
          content: '签单人签约',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: MoreFilled,
        },
        {
          content: '到单录入',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87',
        },
        {
          content: '出纳确认收款',
          timestamp: '2018-04-03 20:46',
          type: 'primary',
          hollow: true,
        },
        {
          content: '开具发票',
          timestamp: '2018-04-03 20:46',
        },
        {
          content: '业务提单',
          timestamp: '2018-04-03 20:46',
          size: 'large',
        },
        {
          content: '审核分单',
          timestamp: '2018-04-03 20:46',
        },
        {
          content: '服务中',
          timestamp: '2018-04-03 20:46',
        },
      ]

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const handleEdit = (row) => {
        if (row.id) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: {
            OrderInfo,
            CustomerInfo,
            SaleStaffInfo,
            ProductList,
            GiftList,
            Licenses,
            PaymentList,
            OrderFlowSet,
            StoreList,
            InvoicingList,
            WorkTasks,
          },
        } = await getOrderInfo(state.queryForm)

        state.currFlow = Math.abs(OrderInfo.OrderFlowState) + 1
        state.OrderInfo = OrderInfo
        state.ProductList = ProductList
        state.GiftList = GiftList
        state.StoreList = StoreList
        state.PaymentList = PaymentList
        state.InvoicingList = InvoicingList
        state.WorkTaskList = WorkTasks

        state.CustomerInfo = CustomerInfo
        state.OrderFlowSet = OrderFlowSet
        state.orderid = OrderInfo.OrderID
        state.CustomerPickID = OrderInfo.CustomerPickID
        state.customerInfoRef.showInfo(CustomerInfo, Licenses)
        state.saleStaffInfoRef.showInfo(SaleStaffInfo)
        state.listLoading = false
      }

      watch(route, (newVal, oldValue) => {
        console.log(newVal, oldValue, '12312312')
        if (newVal.query.orderid) {
          state.queryForm.orderid = route.query.orderid
        }
        fetchData()
      })

      onMounted(() => {
        if (route.query.orderid) {
          state.queryForm.orderid = route.query.orderid
        }
        fetchData()
      })

      const toRecord = () => {
        const row = {
          CustomerPickID: state.CustomerPickID,
          OrderID: state.orderid,
        }
        state.recordRef.handleEdit(row)
      }

      provide('rootMethods', { fetchData })

      return {
        ...toRefs(state),
        activeNames,
        toRecord,
        CustomerHandle,
        InvoicingHandle,
        LicenseHandle,
        handleChange,
        activities,
        setSelectRows,
        handleEdit,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .customer-info-container {
    padding: 0 !important;
    background: $base-color-background !important;
  }
</style>
